<template>
  <div class="top" style="text-align: center;">
    <p>欢迎您{{  }}</p>
    <van-space size="30px" style="width: 90%; ">
      <span style="text-align: center;"><van-icon name="scan" size="40px" color="#0099ff" /><br>扫一扫</span>
      <span style="text-align: center;"><van-icon name="enlarge" size="40px" color="#0099ff" /><br>取水码</span>
      <span style="text-align: center;"><van-icon name="card" size="40px" color="#0099ff" /><br>卡管理</span>
      <span style="text-align: center;"><van-icon name="star-o" size="40px" color="#0099ff" /><br>海星</span>
    </van-space>
  </div>
  <div class="swipe-container" style="width: 90%; margin: 0 auto; margin-top: 2%;"> <!-- 父容器，宽度为100% -->
    <van-swipe :autoplay="3000" :loop="true">
      <van-swipe-item>
        <img :src="`http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280`" alt="" style="height: 120px;">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="`http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560`" alt="" style="height: 120px;">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="`http://gips3.baidu.com/it/u=1537137094,335954266&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280`" alt="" style="height: 120px;">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="`http://gips3.baidu.com/it/u=617385017,3644165978&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960`" alt="" style="height: 120px;">
      </van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <h3 style="text-align: center;">附近营业点</h3>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getoutletlist"
    >
      <van-cell v-for="item in outletlist" :key="item" :title="item.name" value="营业中" :label="item.address" @click="tooutlet(item.id)"/>
    </van-list>

  </div>
  <div class="bql">
  <van-space>
    <van-tabbar v-model="active" active-color="rgb(16, 185, 252)">
      <van-tabbar-item icon="home-o"  url="/">
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.sy" />
        </template>首页</van-tabbar-item>
      <van-tabbar-item icon="search"  url="/fw">
        <template #icon="props" >
          <img :src="props.active ? icon.active : icon.fw " />
        </template>服务</van-tabbar-item>
      <van-tabbar-item icon="friends-o" url="/dd">
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.dd" />
        </template>订单</van-tabbar-item>
      <van-tabbar-item icon="setting-o" url="/my">
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>我的
      </van-tabbar-item>
    </van-tabbar>
  </van-space>
 </div>

</template>
<script>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router'; 
import User from './User.vue'
import 'vant/lib/index.css';
import axios from 'axios';
export default {
  setup() {
    const username = ref(localStorage.getItem('username'));
    const router = useRouter();
    const outletlist = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const getoutletlist = () => {
      axios.get('http://localhost:8000/zhxy/outlet/list/').then(res => {
        outletlist.value = res.data.data;
        if (outletlist.value.length >=res.data.data.count) {
          finished.value = true;
        }
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    }
    const active = ref(0);
    const icon = {
      sy:'/public/fangzi.jfif',
      fw:'/public/erji.jfif',
      dd:'/public/dingdan.jfif',
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    const tooutlet = (id) => {
      router.push(`/outlet/${id}/`);
    }
    onMounted(() => {
      getoutletlist();
    });
    return {
      username,
      tooutlet,
      icon,
      router,
      active, 
      outletlist,
      loading,
      finished
    };
  },
};

</script>
<style scoped>
div {
  justify-content: center;
}
.bql {
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 15%;
}
.top{
  background-color: rgb(16, 185, 252);
  display: block;
  width: 100%;
  height: 30%;
}
.top span{
  display: inline-block;
  justify-content: center;
  background-color: #ffffff;
  margin-bottom: 20px;
  font-size: 15px;
  width: 65px;
  height: 65px;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}
img {
  display: inline;
  width: 100%;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 120px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
